// 店铺信息
<template>
  <div class="page-box h100 display-flex czbj dfdscxvrety">
    <p class="title-label mb10">我的店铺</p>

    <div class="pr20">
      <div class="xcxretr4xrt">
        <div class="display-flex mt20">
          <div class="xcxcdsrey vertical-center tr">店铺名称:</div>
          <div class="flex-1">
            <n-input
              type="text"
              v-model:value="form.name"
              placeholder="请输入店铺名称"
            />
          </div>
        </div>

        <div class="display-flex mt20">
          <div class="display-flex">
            <div class="xcxcdsrey tr">logo:</div>
            <div class="flex-1">
              <div
                class="logo-context vertical-center"
                @click="photoShowModal = true"
              >
                <img
                  :src="form.logo"
                  class="w100 h100 imgjz"
                  v-if="form.logo"
                />
                <span v-else>点击上传图片</span>
              </div>
            </div>
          </div>

          <!-- <div class="display-flex">
            <div class="xcxcdsrey tr">联系电话:</div>
            <div class="flex-1">
              {{ form.phone }}
            </div>
          </div> -->
        </div>
      </div>

      <div class="xcxretr4xrt">
        <div class="display-flex mt20">
          <div class="xcxcdsrey tr">轮播图:</div>
          <div class="flex-1">
            <div
              class="kjjjmsertwe"
              style="grid-template-columns': 'repeat(3, 1fr)"
            >
              <div class="kjjjsertwwx" v-for="(item, idx) in jhhjer" :key="idx">
                <img :src="item" />
                <i
                  class="iconfont dx-closefill sfdgdgty"
                  @click="closesert(idx)"
                ></i>
                <div class="jjnxeertrtw vertical-center">
                  <p>
                    <i
                      class="iconfont dx-left cf fz32 b"
                      @click="kjnmse(idx, 1)"
                    >
                    </i>
                    <i
                      class="iconfont dx-right cf fz30 ml10"
                      @click="kjnmse(idx, 2)"
                    >
                    </i>
                  </p>
                </div>
              </div>

              <div
                class="logo-context vertical-center ab"
                @click="photoShowModaler = true"
              >
                <span>点击上传图片</span>
              </div>
            </div>
          </div>
        </div>

        <div class="display-flex mt20">
          <div class="xcxcdsrey tr vertical-center mt5">营业时间:</div>
          <div class="flex-1">
            <n-checkbox-group v-model:value="form.yinyez">
              <n-space
                item-style="display: flex;"
                style="position: relative; top: 6px"
              >
                <n-checkbox
                  v-for="sd in zhouji"
                  :value="sd.value"
                  :label="sd.label"
                />
              </n-space>
            </n-checkbox-group>
          </div>
        </div>

        <div class="display-flex mt20">
          <div class="display-flex flex-1">
            <div class="xcxcdsrey tr vertical-center">开始时间:</div>
            <div class="flex-1">
              <n-time-picker v-model:value="form.yystartTime" format="HH:mm" />
            </div>
          </div>
          <div class="display-flex flex-1">
            <div class="xcxcdsrey tr vertical-center">结束时间:</div>
            <div class="flex-1">
              <n-time-picker v-model:value="form.yyEndTime" format="HH:mm" />
            </div>
          </div>
        </div>

        <div class="display-flex mt20">
          <div class="xcxcdsrey vertical-center tr">店铺地址:</div>
          <div class="flex-1">
            <p class="z3 fz16 mt5" v-if="form.dizhiname">
              {{ form.dizhiname }}
            </p>
            <p class="ls mt5 sz" @click="xzdzsdr">
              <i class="iconfont dx-map1"></i> 点击选择店铺地址
            </p>
          </div>
        </div>

        <div class="display-flex mt20">
          <div class="xcxcdsrey mt5 tr">支付宝账号:</div>
          <div class="flex-1">
            <n-input
              type="text"
              v-model:value="form.zfbid"
              placeholder="请输入支付宝账号"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cvxvrtyrtt">
    <n-button type="primary" @click="bakdcdty"> 保存/修改 </n-button>
  </div>

  <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
    <template #header>
      <div>店铺logo</div>
    </template>
    <div>
      <photoGallery
        @getImg="getImg"
        :types="'店铺logo' + Userid"
      ></photoGallery>
    </div>
    <template #action>
      <div class="tr">
        <n-button @click="photoShowModal = false"> 取消 </n-button>
        <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
      </div>
    </template>
  </n-modal>

  <n-modal
    v-model:show="photoShowModaler"
    preset="card"
    class="Stock-diagnosis"
  >
    <template #header>
      <div>店铺轮播图</div>
    </template>
    <div>
      <photoGallery
        @getImg="getImger"
        :types="'店铺轮播图' + Userid"
      ></photoGallery>
    </div>
    <template #action>
      <div class="tr">
        <n-button @click="photoShowModaler = false"> 取消 </n-button>
        <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
      </div>
    </template>
  </n-modal>

  <n-modal v-model:show="ismaps" preset="card" class="kzxcxdffrtret">
    <template #header>
      <div>选择地址</div>
    </template>
    <div class="w100 h100">
      <dxmap @close="ismaps = false" @success="successmap"></dxmap>
    </div>
  </n-modal>
</template>
 <script lang='ts' setup>
import { ref, nextTick } from "vue";
import {
  dxget,
  dxpost,
  qurl,
  hf,
  transferTimeYMD,
  callBack,
} from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import dxmap from "../../components/util/dxmap.vue";
const jhhjer = ref([]);
const Userid = ref(localStorage.id);
const photoShowModal = ref();
const photoShowModaler = ref(false);
const ismaps = ref();
const zhouji = [
  {
    label: "周一",
    value: "周一",
  },
  {
    label: "周二",
    value: "周二",
  },
  {
    label: "周三",
    value: "周三",
  },
  {
    label: "周四",
    value: "周四",
  },
  {
    label: "周五",
    value: "周五",
  },
  {
    label: "周六",
    value: "周六",
  },
  {
    label: "周日",
    value: "周日",
  },
];
const form = ref({
  name: "",
  logo: "",
  banner: "",
  phone: "",
  yinyez: "",
  yystartTime: new Date().getTime(),
  yyEndTime: new Date().getTime(),
  dizhiname: "",
  jwd: "",
});
const closesert = (idx) => {
  jhhjer.value.splice(idx, 1);
};
const kjnmse = (idx, type) => {
  if (type == 1 && idx > 0) {
    [jhhjer.value[idx - 1], jhhjer.value[idx]] = [
      jhhjer.value[idx],
      jhhjer.value[idx - 1],
    ];
  }
  console.log(jhhjer.value.length < idx);
  if (type == 2 && jhhjer.value.length - 1 > idx) {
    [jhhjer.value[idx + 1], jhhjer.value[idx]] = [
      jhhjer.value[idx],
      jhhjer.value[idx + 1],
    ];
  }
};
let jjnmnxeer = "";
const getImger = (data) => {
  jjnmnxeer = data;
};
const setImger = () => {
  jhhjer.value.push(jjnmnxeer);
  photoShowModaler.value = false;
};

let jjnmnxe = "";
const getImg = (data) => {
  jjnmnxe = data;
};
const setImg = () => {
  form.value.logo = jjnmnxe;
  photoShowModal.value = false;
};

const xzdzsdr = (item) => {
  ismaps.value = true;
};

const successmap = (data) => {
  ismaps.value = false;
  form.value.dizhiname = data.dikjxzx;
  form.value.jwd = data.zb;
};

const initsd = async () => {
  const { data } = await dxget("meirong/api/getdpinfo");
  try {
    data.yinyez = data.yinyez.split(",");
  } catch (e) {}
  form.value = data;

  jhhjer.value = data.banner.split(",");
  localStorage.zzhn = data.zzhn
};

initsd();

const bakdcdty = async () => {
  form.value.banner = jhhjer.value.join(",");
  form.value.yinyez = form.value.yinyez.join(",");
  const ddrt = await dxpost("meirong/mendian", form.value, "put");
  window.$message.success("保存成功！");
  initsd();
};
</script>
 <style scoped>
.xcxcdsrey {
  width: 120px;
  text-align: right;
  padding-right: 10px;
}
.xcxretr4xrt {
  width: 1000px;
}
.xcxzcdstt {
  min-width: 100px;
  font-size: 18px;
}
.cvxvrtyrtt {
  position: fixed;
  left: 0;
  background: #fff;
  bottom: 0;
  width: 100%;
  z-index: 99;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 10px 0;
}
.dfdscxvrety {
  padding-bottom: 100px;
  overflow: auto;
}
</style>